<template>
  <view class="one">
    <view class="two">
      <view style="display: flex; justify-content: space-between;">
        <text style="background-color: rgb(0,217,255);">{{customProp.type}}</text>
        <text style="margin-left: 10rpx;">任务名称:{{ customProp.name }}</text>
      </view>
	  
	  <view v-if="customProp.status==='FINISHIED'">
		  <text style="background-color: rgb(2,242,8);">已完成</text>
	  </view>
	  <view v-else>
		  <text style="background-color: rgb(255,132,61);">待完成</text>
	  </view>
    </view>

    <view class="xian"></view>

    <view class="three">
      <text>所在场区：</text>
      <text>{{ customProp.deptId }}</text>
    </view>

    <view class="three">
      <text>任务负责人：</text>
      <text>{{ customProp.uername }}</text>
    </view>

    <view class="three">
      <text>备注：</text>
      <text>{{ customProp.remark }}</text>
    </view>

    <view class="xian"></view>

    <view style="display: flex; justify-content: space-between;">
      <view>
        <text>创建时间：</text>
		<text>{{ customProp.createTime }}</text>
      </view>
	  
	  <view>
		  <text>创建人：</text>
		  <text>{{customProp.createBy}}</text>
	  </view>
      
    </view>
	
	
	
  </view>
</template>

<script>export default {
  props: {
    customProp: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style>.one {
  width: 100%;
  height: 300rpx;
  border: 2rpx solid rgb(188,188,188);
  border-radius: 3rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 20rpx;
}
.two {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.xian {
  width: 100%;
  height: 1rpx;
  background-color: rgb(121,121,121);
}
.three {
  width: 100%;
  display: flex;
}
</style>